<template>
	<view class="bgImag">
		<div class="top">.</div>
		<div class="From">
			<h1 class="title">登录</h1>
			<div class="from-box">
				账号<input class="inp" type="text" v-model="user.username" placeholder="请输入账号" />
			</div>
			<div class="from-box">
				密码<input class="inp" type="password" v-model="user.password" placeholder="请输入密码" />
			</div>

			<button class="loginButton" @click="tologin">点击登录</button>
			<div class="bottom-box">
				<div @click="gotoForgot">
					忘记密码
				</div>
				<div @click="gotoApply">
					申请入驻
				</div>
			</div>
		</div>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					username: '',
					password: ''
				}

			}
		},
		methods: {
			gotoForgot() {
				uni.navigateTo({
					url: "/pages/Forgotpaw/Forgotpaw"
				})
			},
			gotoApply() {
				uni.navigateTo({
					url: "/pages/PerfectOne/perfectOne"
				})
			},
			tologin() {
				uni.showLoading({
					title: '登录中'
				})
				uni.request({
					url: 'http://172.27.6.151:32112/api/doctor/login',
					method: 'POST',
					data: this.user,
					success(res) {
						console.log(res, '111');
						uni.hideLoading()
						if (res.data.code == 200) {

							uni.navigateTo({
								url: '/pages/Index/Index',
							})
						} else {
							uni.showToast({
								title: "登录失败",
								icon: 'error'
							})
						}
					}
				})
			},
		}
	}
</script>

<style>
	.bottom-box {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
	}

	.bgImag {

		font-weight: 900;
		width: 741rpx;
		height: 100vh;
		background-image: url('https://img.tukuppt.com/ad_preview/00/36/01/5fd97a8a66f43.jpg!/fw/780');
		background-size: cover;
		/* 或 contain，根据需要选择 */
		background-position: center;
		/* 背景图居中 */
		background-repeat: no-repeat;
		/* 不重复 */
	}

	.loginButton {
		width: 632rpx;
		background-color: cadetblue;
		color: aliceblue;
	}

	.title {
		margin-left: 45%;
		font-size: 60rpx;
		font-weight: 600rpx;

	}

	.From {
		width: 700rpx;
		height: 667rpx;
		margin-left: 20rpx;
		background-color: rgb(0.5, 0.5, 0.5, 0.5);
		color: aliceblue;
		border-radius: 30rpx;


	}

	.from-box {
		width: 632rpx;
		height: 100rpx;
		line-height: 100rpx;
		align-items: center;
		border: 2px solid #fff;
		display: flex;
		margin-top: 30rpx;
		margin-bottom: 90rpx;
		margin-left: 20rpx;
		padding-left: 20rpx;
	}

	.inp {

		margin-left: 30rpx;
	}

	.top {
		margin-bottom: 30%;
	}
</style>